<template>
	<navigator :url="'/pages/article/detail?id='+item.id">
		<view class="content">
			<view class="left" v-if="item.images.length > 0">
				<image :src="item.images" mode="aspectFill"></image>
			</view>
			<view class="right">

				<view class="title">
					<view class="tag">
						<view class="top item" v-if="item.is_top == 1">置顶</view>
						<view class="hot item" v-if="item.is_hot == 1">推荐</view>
					</view>
					{{item.title}}
				</view>
				<view class="userInfo">
					<view class="avator">
						<image :src="item.userInfo.avator" mode="aspectFill"></image>
					</view>
					<view class="nickname">{{item.userInfo.nickname}}</view>
				</view>
				<view class="abount">
					<view class="item category">
						<uni-icons type="calendar"></uni-icons>{{item.create_time}}
					</view>
					<view class="item read">
						<uni-icons type="eye"></uni-icons>{{item.heat}}
					</view>
					<view class="item read">
						<uni-icons type="chatbubble"></uni-icons>{{item.comment}}
					</view>
				</view>
			</view>
		</view>
	</navigator>
</template>

<script setup>
	defineProps(['item'])
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 0;
		display: flex;
		align-items: center;

		.left {
			margin-right: 20rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}
		}

		.right {
			flex: 1;
			width: 60%;
			position: relative;


			.title {
				width: 100%;
				line-height: 40rpx;
				font-size: 32rpx;
				color: #000;
				font-weight: 700;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

			.tag {
				display: flex;

				.item {
					background-color: $theme-color;
					margin-right: 10rpx;
					padding:2rpx 6rpx;
					line-height: 25rpx;
					border-radius: 5rpx;
					font-size: 18rpx;
					color: #fff;
					font-weight: 500;
				}

				.hot {
					background-color: red;
				}
			}

			.userInfo {
				display: flex;
				align-items: center;
				margin: 10rpx 0;

				.avator {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.nickname {
					color: #4b5563;
					font-size: 20rpx;
					margin-left: 20rpx;
				}
			}

			.abount {
				display: flex;
				line-height: 38rpx;

				.item {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #7d8390;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>